<template>
  <div class="chinaVerified">
    <form ref="form">
      <div class="list">
        <ul>
          <li>
            <label><span>{{lang['CountryofCitizenship']}}</span></label>
            <select v-model="selectedCountry" @change="changeCountryCode" :class="{white: phoneCode}">
              <option v-for="item in countryList" :value="item.Areacode + '|' + item.Code" v-text="item.Name"></option>
            </select>
          </li>

          <!-- 中国认证  -->
          <li v-show="countryCode === 'CN'">
            <label><span>{{lang['surnameAndPersonalName']}}</span></label>
            <input type="text" name="fullName" v-model='fullName' :placeholder="lang['please real name']">
          </li>
          <li v-show="countryCode === 'CN'">
            <label><span>{{lang['IdNumber']}}</span></label>
            <input type="text" name="" value="" v-model='certNum' :placeholder="lang['please fill ID number']">
          </li>
          <li v-show="countryCode === 'CN'">
            <label><span>{{lang['startDate']}}</span></label>
            <el-date-picker v-model="chinaStartDate" id="chinaStartDate" type="date" :placeholder="lang['please start date certificate']"> </el-date-picker>
          </li>
          <li v-show="countryCode === 'CN'">
            <label><span>{{lang['endDate']}}</span></label>
            <el-date-picker v-model="chinaEndtDate" id="chinaEndtDate" type="date" :placeholder="lang['please end date certificate']"> </el-date-picker>
          </li>
          <!-- 中国认证  -->

          <!-- 海外认证开始 -->
            <li v-show="countryCode !== 'CN'">
              <label><span>{{lang['passport number']}}</span></label>
              <input type="text" name="" value="" v-model='passport' :placeholder="lang['please id number']">
            </li>
            <li v-show="countryCode !== 'CN'">
              <label><span>{{lang['name']}}</span></label>
              <input type="text" name="" value="" v-model='firstName' :placeholder="lang['please name']">
            </li>
            <li v-show="countryCode !== 'CN'">
              <label><span>{{lang['surname']}}</span></label>
              <input type="text" name="" value="" v-model='lastName' :placeholder="lang['please last name']">
            </li>
            <!-- 海外认证 -->
        </ul>

        <div class="words">
          <h3>{{lang['pay attention to']}}</h3>
          <p><em>1</em> {{lang['pour_one']}}</p>
          <p><em>2</em> {{lang['pour_two']}}</p>
          <p><em>3</em>{{lang['pour_three']}}</p>
        </div>
      </div>

      <div class="cardIdList" v-show="countryCode === 'CN'">
        <ul>
          <li>
            <p>
              <!-- <img :src="imgUrl" id="img"/> -->
              <img :src="imgUrl" />
              <img :src="waterMarkDefault" class="watermark" v-show="langKey === 'zh-CN'"/>
              <img :src="waterMarkOther" class="watermark" v-show="langKey !== 'zh-CN'"/>
              <label class="file" for="file"> </label>
              <input type="file" id="file" name="CertAndPerson" style="display:none" ref="photoFile1" @change="changeImage('photoFile1', 'imgUrl')" accept="image/gif,image/jpeg,image/jpg,image/png" />
            </p>
            <!-- @change="uploadImg1($event)" -->
            <a>{{lang['uploadHandIdCard']}}</a>
          </li>

          <li>
            <p>
              <img :src="imgUrl2" />
              <img  :src="waterMarkDefault" class="watermark" v-show="langKey === 'zh-CN'"/>
              <img  :src="waterMarkOther" class="watermark" v-show="langKey !== 'zh-CN'"/>
              <label class="file" for="CirdPositive"> </label>
              <input type="file" name="CertFacade" id="CirdPositive" style="display:none" ref="photoFile2" @change="changeImage('photoFile2', 'imgUrl2')" accept="image/gif,image/jpeg,image/jpg,image/png" />
            </p>
            <a>{{lang['uploadDocumentFrontPhoto']}}</a>
          </li>

          <li>
            <p>
              <img :src="imgUrl3" />
              <img :src="waterMarkDefault" class="watermark" v-show="langKey === 'zh-CN'"/>
              <img :src="waterMarkOther" class="watermark" v-show="langKey !== 'zh-CN'"/>
              <label class="file" for="CirdOpposite"> </label>
              <input type="file" name="CertBack" id="CirdOpposite" style="display:none" ref="photoFile3" @change="changeImage('photoFile3', 'imgUrl3')" accept="image/gif,image/jpeg,image/jpg,image/png" />
            </p>
            <a>{{lang['uploadNegativePhoto']}}</a>
          </li>
        </ul>
      </div>

      <div class="cardIdList" v-show="countryCode !== 'CN'">
        <ul>
          <li>
            <p>
              <img :src="imgUrl4" />
              <img :src="waterMarkOther" class="watermark"/>
              <label class="file" for="file4"> </label>
                <input type="file" id="file4" name="" style="display:none" ref="photoFile4" @change="changeImage('photoFile4', 'imgUrl4')" accept="image/gif,image/jpeg,image/jpg,image/png"/>
            </p>
            <a>{{lang['upload a handheld passport']}}</a>
          </li>
          <li>
            <p>
              <img :src="imgUrl5" />
              <img :src="waterMarkOther" class="watermark"/>
              <label class="file" for="file5"> </label>
              <input type="file" id="file5" name="" style="display:none" ref="photoFile5" @change="changeImage('photoFile5', 'imgUrl5')" accept="image/gif,image/jpeg,image/jpg,image/png"/>
            </p>
            <a>{{lang['upload passport photos']}}</a>
          </li>
        </ul>
        <div class="overseas_tishi">
          <p>{{lang['information on documents']}}<a @click="showPassport = !showPassport">{{lang['passport Case']}}</a></p>
        </div>
      </div>

      <div style="clear:both"></div>
      <button type="button" class="submitBtn"
      :class="{active: !isSubmitBtnCheck}" @click="submitCertifiedCustomer" v-show="countryCode === 'CN'">
        {{lang['authentication information']}}
      </button>

      <button type="button" class="submitBtn" :class="{active: !isSubmitBtnCheck }" @click="overseaSubmitBtn" v-show="countryCode !== 'CN'">
        {{lang['authentication information']}}
      </button>
    </form>

    <!-- 成功-->
    <SwModal :isShow.sync="showModal" :isShowBg="true"  modalClass="userModal smallModal" :isCloseOnClickBg="true" :onClosed="onClosed" :okText="lang['determineBth']" :ok="cardBtndetermine">
      <div class="successfulOperation">
        <p>{{lang['authenticationPrompt_One']}}</p>
      </div>
    </SwModal>

    <!-- 弹窗 提示-->
    <SwModal
      modalClass="userModal"
      :isShow.sync="showPassport"
      :isShowBg="true"
      :isCloseOnClickBg="true"
    >
      <div style="line-height:0">
        <img src="../images/card_certification05.png">
      </div>
    </SwModal>
  </div>

</template>

<script>
import ModalApi from '@/components/SwModal/api.js'
import SwModal from '@/components/SwModal'
import Utils from '@/utils/Utils.js'
import {mapGetters} from 'vuex'

export default {
  props: [
    'lang',
    'langKey',
    'countryList',
    'countryCodeType',
    'certIfonList'
  ],
  data () {
    return {
      selectedCountry: '',
      phoneCode: '',
      countryCode: '',
      showModal: false,
      imgUrl: require('../images/card_certification01.png'),
      imgUrl2: require('../images/card_certification02.png'),
      imgUrl3: require('../images/card_certification03.png'),
      chinaStartDate: '',
      chinaEndtDate: '',
      fullName: '',
      certNum: '',
      isSubmitBtnCheck: true,
      imgUrl4: require('../images/card_certification06.png'),
      imgUrl5: require('../images/card_certification07.png'),
      showPassport: false,
      passport: '',
      firstName: '',
      lastName: '',
      photoFile1Data: null,
      photoFile2Data: null,
      photoFile3Data: null,
      photoFile4Data: null,
      photoFile5Data: null
    }
  },
  computed: {
    ...mapGetters({
      customInfo: 'customInfo'
    }),
    // 默认水印
    waterMarkDefault: function () {
      return this.customInfo.WaterMark ? this.customInfo.WaterMark : require('../images/idcm-watermark-cn.png')
    },
    // 其他都取英文水印
    waterMarkOther: function () {
      return this.customInfo.WaterMark2 ? this.customInfo.WaterMark2 : require('../images/idcm-watermark-eng.png')
    }
  },
  watch: {
    countryList () {
      this.getDefaultCountry()
    },
    countryCodeType () {
      this.getDefaultCountry()
    },
    certIfonList () {
      if (this.certIfonList.CertType === 1) {
        this.fullName = this.certIfonList.FullName
        this.certNum = this.certIfonList.CertNum        
        this.chinaStartDate = Utils.formatDate(new Date(this.certIfonList.CertStartTime), 'yyyy-MM-dd')
        this.chinaEndtDate = Utils.formatDate(new Date(this.certIfonList.CertEndTime), 'yyyy-MM-dd')
        this.imgUrl = this.certIfonList.CertAndPersonImg // 手持
        this.imgUrl2 = this.certIfonList.CertFacadeImg // 证明
        this.imgUrl3 = this.certIfonList.CertBackImg // 反面
      }
      if (this.certIfonList.CertType === 2) {
        this.passport = this.certIfonList.CertNum
        this.firstName = this.certIfonList.FirstName
        this.lastName = this.certIfonList.LastName
        this.imgUrl4 = this.certIfonList.CertAndPersonImg
        this.imgUrl5 = this.certIfonList.CertFacadeImg
      }
    }
  },
  components: {
    SwModal
  },
  methods: {
      // 输入中校正空code
    changeCountryCode () {
      let phoneCode = this.selectedCountry.split('|')[0]
      let countryCode = this.selectedCountry.split('|')[1]
      if (!phoneCode) {
        this.phoneCode = ''
        ModalApi.message(this.lang['41005'], '', '', 'userModal')
      } else {
        this.phoneCode = phoneCode
      }
      this.countryCode = countryCode

      // this.countryCodeType = countryCode
    },
    getDefaultCountry () {
      if (this.countryList.length && !this.countryCodeType) {
        this.selectedCountry = this.countryList[1].Areacode + '|' + this.countryList[1].Code
        return
      }

      // 这两个值都是异步的，必须两个值都有了才能进行下面
      if (this.countryList.length && this.countryCodeType) {
        for (let i = 0; i < this.countryList.length; i++) {
          if (this.countryCodeType.toUpperCase() === this.countryList[i].Code) {
            this.selectedCountry = this.countryList[i].Areacode + '|' + this.countryList[i].Code
            this.phoneCode = this.countryList[i].Areacode
            this.countryCode = this.countryList[i].Code
          }
        }
      }
    },
    getImgBase64 (fileNode) {
      let files = fileNode.files
      let promise = Utils.makePromise()
      let size = files[0].size / 1024
      let reader = new FileReader()
      reader.readAsDataURL(files[0])
      reader.onload = function (e) {
        if (size > 5000) {
          promise.rejectHandle()
        } else {
          promise.resolveHandle(this.result)
        }
      }
      return promise
    },
    changeImage (photoRef, img) {
      // 文件重选点取消，input值会自动清空上一次所选
      if (!this.$refs[photoRef].files.length) {
        // this[img] = ''
        return
      }

      this.getImgBase64(this.$refs[photoRef])
      .then((res) => {
        this[img] = res
        // 先缓存起来，因为文件重选点取消，input值会自动清空上一次所选
        this[photoRef + 'Data'] = this.$refs[photoRef].files[0]
      })
      .catch(() => {
        ModalApi.message(this.lang['the uploaded pictures cant be larger than'], '', '', 'userModal')  // '上传的图片不能大于5M！'
      })
    },
    // 中国认证提交
    submitCertifiedCustomer () {
      if (!this.isSubmitBtnCheck) {
        return
      }

      if (!this.phoneCode) {
        ModalApi.message(this.lang['41005'], '', '', 'userModal')
        return
      }

      if (!this.fullName) {
        ModalApi.message(this.lang['please real name'], '', '', 'userModal') // '请填写您的真实姓名'
        return
      }

      if (!this.certNum) {
        ModalApi.message(this.lang['please fill ID number'], '', '', 'userModal')// '请填写您的身份证号码'
        return
      }
      if (!this.chinaStartDate) {
        ModalApi.message(this.lang['please start date certificate'], '', '', 'userModal') // '请选择证件有效起始日期'
        return
      }
      if (!this.chinaEndtDate) {
        ModalApi.message(this.lang['please end date certificate'], '', '', 'userModal') // '请选择证件有效结束日期'
        return
      }

      if (this.chinaEndtDate < this.chinaStartDate) {
        ModalApi.message(this.lang['end date greater start date'], '', '', 'userModal') // '结束日期必须大于开始日期'
        return
      }

      let url = 'Security/UpdateVerifyIdentity'
      if (!this.certIfonList.CertAndPersonImg || this.certIfonList.CertType === 2) {
        url = 'Security/VerifyIdentity'
        if (!this.photoFile1Data) {
          ModalApi.message(this.lang['please upload handheld id'], '', '', 'userModal')
          return
        }

        if (!this.photoFile2Data) {
          ModalApi.message(this.lang['please upload front photo'], '', '', 'userModal') // '请选择上传证件正面照'
          return
        }

        if (!this.photoFile3Data) {
          ModalApi.message(this.lang['please reverse photo uploaded'], '', '', 'userModal') // '请选择上传证件反面照'
          return
        }
      }

      this.isSubmitBtnCheck = false

      let formData = new FormData() // this.$refs.form
      formData.append('CertNum', this.certNum)
      formData.append('CertType', 1)
      formData.append('FullName', this.fullName)
      formData.append('CertStartTime', Utils.formatDate(new Date(this.chinaStartDate), 'yyyy-MM-dd'))
      formData.append('CertEndTime', Utils.formatDate(new Date(this.chinaEndtDate), 'yyyy-MM-dd'))
      formData.append('CountryCode', this.countryCode)
      formData.append('CertAndPerson', this.photoFile1Data)
      formData.append('CertFacade', this.photoFile2Data)
      formData.append('CertBack', this.photoFile3Data)

      this.$http.post(url, formData, {
        config: {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        },
        modalOptions: {
          modalClass: 'userModal'
        }
      }).then((res) => {
        if (res.StatusCode === '200') {
          this.certNum = ''
          this.fullName = ''
          this.showModal = !this.showModal
          this.$emit('GetCustomerList')
        }
        this.isSubmitBtnCheck = true
      })
    },
    // 海外认证
    overseaSubmitBtn () {
      if (!this.isSubmitBtnCheck) {
        return
      }
      if (!this.phoneCode) {
        ModalApi.message(this.lang['41005'], '', '', 'userModal')
        return
      }
      if (!this.passport) {
        ModalApi.message(this.lang['please id number'], '', '', 'userModal')
        return
      }
      if (!this.firstName) {
        ModalApi.message(this.lang['please name'], '', '', 'userModal')
        return
      }
      if (!this.lastName) {
        ModalApi.message(this.lang['please last name'], '', '', 'userModal')  // '请填写姓'
        return
      }

      let url = 'Security/UpdateVerifyIdentity'
      if (!this.certIfonList.CertAndPersonImg || this.certIfonList.CertType === 1) {
        url = 'Security/VerifyIdentity'
        if (!this.photoFile4Data) {
          ModalApi.message(this.lang['please choose a handheld passport'], '', '', 'userModal') // '请选择手持护照'
          return
        }

        if (!this.photoFile5Data) {
          ModalApi.message(this.lang['please select the passport front'], '', '', 'userModal') // '请选择护照正面'
          return
        }
      }
      this.isSubmitBtnCheck = false
      let formData = new FormData() // this.$refs.form
      formData.append('UserId', '')
      formData.append('CertNum', this.passport)
      formData.append('CertType', 2)
      formData.append('FirstName', this.firstName)
      formData.append('LastName', this.lastName)
      formData.append('FullName', '')
      formData.append('CountryCode', this.countryCode)
      formData.append('CertAndPerson', this.photoFile4Data)
      formData.append('CertFacade', this.photoFile5Data)
      // console.log(this.photoFile5Data)
      this.$http.post('Security/VerifyIdentity', formData, {
        config: {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        },
        modalOptions: {
          modalClass: 'userModal'
        }
      }).then((res) => {
        if (res.StatusCode === '200') {
          this.passport = ''
          this.firstName = ''
          this.lastName = ''
          this.showModal = !this.showModal
          this.$emit('GetCustomerList')
        }
        this.isSubmitBtnCheck = true
      })
    },
    cardBtndetermine () {
      this.showModal = false
    },
    onClosed () {

    }
  },
  mounted () {

  }
}
</script>

<style lang="less">
.chinaVerified {
  padding-bottom: 20px;
  background: #1A1F2B;
  overflow: hidden;

  .list {
    float: left;
    margin-left: 100px;
    width: 420px;
     li {
      position: relative;
      label {
        display: block;
        padding: 15px 10px 5px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        a {
          display: inline-block;
          line-height: 20px;
          color: #f00;
        }
      }

      input {
        padding: 0 10px;
        width: 100% !important ;
        height: 40px;
        line-height: 40px;
        border-radius: 2px;
        box-sizing: border-box;
        background-color: #2A3440;
        color: #fff;
        font-size: 12px;
      }

      select{
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        width: 100%;
        border-radius: 2px;
        background-color: #2A3440;
        color: rgba(255,255,255,.7);
        font-size: 12px;
        &.white {
          color: #fff;
        }
      }
    }

    .el-input__inner{
      border:none;
      padding-left: 35px;
      box-sizing: border-box;
    }
  }

  .list .el-date-editor.el-input,.list .el-date-editor.el-input__inner{
    width: 100%;
    border:none;
  }



  .cardIdList {
    float: right;
    padding-top: 40px;
    margin-right: 100px;
    width: 324px;

    li {
      p {
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        width: 215px;
        height: 144px;
        line-height: 144px;
        text-align: center;

        img {
          max-width: 215px;
          max-height: 144px;
          vertical-align: middle;

          &.watermark {
            position: absolute;
            max-width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .file {
          width: 58px;
          height: 58px;
          display: none;
          background: #1a1f2b url(../images/card_certification04.png) no-repeat center center;
          border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -29px 0 0 -29px;
        }
      }
      a {
        display: block;
        line-height: 40px;
        text-align: center;
        font-size: 12px;
        color: #fff;
      }
    }
  }


  .cardIdList li:hover p .file {
    display: block;
  }

  .overseas_tishi {
    width: 100%;
    line-height: 18px;
    color: #fff;
    font-size:12px;
    a {
      display: inline-block;
      margin-left: 15px;
      color: #3782FF;
    }
  }

  .submitBtn {
    display: block;
    margin: 20px auto 0;
    width: 220px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #3782FF;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    cursor: pointer;
    clear: both;
    &.active{
      background-color: #2A3441;
      cursor: not-allowed;
    }
  }

  .words {
    margin: 15px 0 50px;
    h3 {
      font-size: 14px;
      color: #FD3117
    }
    p {
      position: relative;
      padding-left: 15px;
      margin-top: 5px;
      line-height: 18px;
      font-size: 12px;
      color: #FD3117;
      em{
        position: absolute;
        left: 0;
      }
    }
  }
}


@media screen and (max-width:1200px){
  .chinaVerified {
    .list {
      width: auto;
      padding: 0 20px;
      margin: 0; 
      float: none;
    }

     .cardIdList {
      width: auto;
      padding: 0 20px;
      float: none;
      margin: 0;

      li {
        float: left;
        margin-right: 20px;
      }

      li:nth-of-type(2n) {
        float:right;
        margin-right:0;
      }
    }

    .overseas_tishi {
      clear: both;

      a {
        margin-left: 0;
        display: block;
      }
    }
  }
}
</style>
